<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/angular.js"></script>
    <style>
        div{
            border: 1px solid #ffff00;
            width: 400px;
            height: 300px;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }

    </style>
</head>
<body ng-app="app">
<div ng-controller="subApp1">
    <input type="text" ng-model="txt"/>
    <input type="text" ng-model="txt"/>
    <input type="text" ng-readonly="true" value="你改不了我"/>
    <div ng-if="true">12312</div>
    <div ng-class="{red:true,blue:false}">{{}}</div>
    <div ng-class="blue:false"></div>
</div>
<div ng-controller="subApp2">
    <input type="text" ng-model="txt"/>
    <input type="text" ng-model="txt"/>
</div>
</body>
<script>
    angular.module('app.subApp1',[]).controller('subApp1',function($scope){
//        $scope.className='red';
    });
    angular.module('app.subApp2',[]).controller('subApp2',function($scope){
        
    });
    angular.module('app',['app.subApp1','app.subApp2'])
</script>
</html>